import { Form, Select, DatePicker, Table } from "antd"
import { Public } from ".."
import { useEffect, useState } from "react";
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { ColumnsType } from "antd/es/table";
import { generalData, exports1 } from "@/services/financialApi";
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
const columns: ColumnsType<DataType> = [
    {
        title: '账户',
        dataIndex: 'subName',
        onCell: (_, index: any) => ({
            rowSpan: index % 3 == 0 || index === 0 ? 3 : 0
        }),
        render: (text) => <a>{text}</a>,
    },
    {
        title: '项目',
        dataIndex: 'clProject',
    },
    {
        title: '科目名称',
        dataIndex: 'subNoName',
    },
    {
        title: '初期金额',
        dataIndex: 'initialBalance',
    },
    {
        title: '借方(收入)',
        dataIndex: 'debitAmount',
    },
    {
        title: '贷方(支出)',
        dataIndex: 'creditAmount',
    },
    {
        title: '期末余额',
        dataIndex: 'finalBalance',
    },
];
const General = () => {
    const [data1, setData1] = useState([]);

    const gData = () => {
        generalData({ accId: 1, endDate: '2023-10', pageNo: 1, pageSize: 10, startDate: '2023-10' }).then(({ data }) => {
            let _data1 = data.list.map((v: any) => {
                return { ...v }
            })
            setData1(_data1)
        })
    }
    useEffect(() => {
        gData()
    }, [])
    const [selectedValue, setSelectedValue] = useState('male');
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const onFinish = (values: any) => {
        console.log(values);
    };
    const onChange = (e: CheckboxChangeEvent) => {
        console.log(`checked = ${e.target.checked}`);
    };
    // 导出
    const exports2 = () => {
        exports1().then((res) => {
            console.log(res);
            let a = document.createElement('a')
            let b = new Blob([res], { type: '.xls' })
            a.setAttribute('href', URL.createObjectURL(b))
            a.setAttribute('download', '财务1.xls')
            a.click()

        })
    }
    return (
        <div>
            <Public header={"核对总账"}></Public>
            <Form
                style={{ display: 'flex' }}
                name="customized_form_controls"
                layout="inline"
                onFinish={onFinish}
            >
                <Form.Item
                    label="日期："
                    name="date"
                    style={{ marginLeft: '60px' }}
                >
                    <RangePicker picker="month" />
                </Form.Item>
                <Form.Item
                    label="账户："
                    name="subone"
                >
                    <Select
                        placeholder="科目筛选"
                        allowClear
                        style={{ width: 140 }}
                    >
                        <Option value="male">male</Option>
                        <Option value="female">female</Option>
                        <Option value="other">other</Option>
                    </Select>
                </Form.Item>
                <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }} onClick={onFinish}>搜素</button>
            </Form>
            <Form style={{ width: 400, marginLeft: 410, marginTop: -35, }}>
                <button style={{ width: '60px', height: '35px', marginRight: 20, marginLeft: 140, marginTop: -40, border: 'none', background: '#22AB82', color: 'white' }} onClick={exports2}>
                    导出
                </button>
                <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
            </Form>
            <Table columns={columns} dataSource={data1} style={{ margin: 'auto', marginTop: '20px', width: '95%' }} bordered />
        </div>
    )
}
export default General